<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas入门</title>
</head>
<body>
<canvas id="demo" width="600" height="600"></canvas>
</body>
</html>

<script>
    var canvas = document.getElementById("demo");
    //获取上下文
    var ctx = canvas.getContext("2d");
    console.log(ctx);

    var width = canvas.width;
    console.log(width);
    //开始绘制
    ctx.moveTo(width / 4, width / 4);
    ctx.lineTo(width / 4 * 3, width / 4);
    ctx.lineTo(width / 4 * 2, width / 4 * 3);
    //    ctx.lineTo(100, 100);
    // 闭合路径
    ctx.closePath();
    // 设置线宽
    ctx.lineWidth = 5;

    ctx.strokeStyle = '#ff705e'
    ctx.stroke();
    ctx.fillStyle = "green";
    //填充色
    ctx.fill();

</script>